<template>
  <!-- 管理话题页面 -->
  <view class="main">
    <view class="top">
      <view class="left"> 添加话题 </view>
      <view class="center">
        <input
          type="text"
          value=""
          placeholder="请输入话题名称"
          v-model="topic"
          maxlength="12"
        />
      </view>
      <view class="right" @tap="handleAddLabel">
        <image src="../../imges/jiaru.png" mode="aspectFill"></image>
      </view>
    </view>
    <view class="zhuyi" v-if="normalTopics.length != 0">
      注：拖动话题左边区域可调整排列顺序！
    </view>
    <!-- 空状态显示 -->
    <view class="wu_Huo" v-if="normalTopics.length == 0">
      <image src="../../imges/nobiaoqian.png" mode="aspectFill"></image>
      <text>暂未添加话题</text>
    </view>

    <drag-sorts
      :list="normalTopics"
      @change="onDragSortChange"
      @changeData="changeData"
      v-if="normalTopics.length != 0"
    ></drag-sorts>

    <view class="bottom_pin">
      <view class="title"> 已屏蔽话题 </view>
      <view class="list">
        <view class="item" v-for="(item, index) in screenTopics" :key="index">
          <view class="left">
            {{ item.topic }}
            <text class="xian"></text>
          </view>
          <view class="right" @tap="handleNoPinB(item.id)">
            <image src="../../imges/jiahua.png" mode="aspectFill"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
import dragSorts from "@/components/drag-sortsTopic/index.vue";
export default {
  components: {
    dragSorts,
  },
  data() {
    return {
      topic: "", //话题
      quanId: "", //圈子id
      normalTopics: [
        {
          label: "话题",
        },
      ], //正常话题
      screenTopics: [], //屏蔽话题
    };
  },
  onLoad(options) {
    this.quanId = options.id;
    this.handleList();
  },
  methods: {
    changeData(e) {
      this.handleList();
    },
    handleAddLabel() {
      //添加标签
      if (this.topic.trim() == "") {
        uni.showToast({
          title: "请输入要添加的标签",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      if (this.topic.trim().length > 12) {
        uni.showToast({
          title: "话题字符过长，请重新设置",
          duration: 1500,
          icon: "none",
        });
        return false;
      }

      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/friendsTopic/addFriendsTopic",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            friendsId: this.quanId,
            topic: this.topic.trim(),
          },
        }).then((res) => {
          // console.log(res, '添加标签')
          if (res.data.code == 200) {
            uni.showToast({
              title: "添加成功",
              duration: 2000,
              icon: "none",
            });
            this.topic = "";
            this.handleList();
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },

    handleNoPinB(e) {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/friendsTopic/screenTopic",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            id: e,
            isShield: 0,
          },
        }).then((res) => {
          // console.log(res, '发现圈子')
          if (res.data.code == 200) {
            uni.showToast({
              title: "解除屏蔽成功",
              duration: 2000,
              icon: "none",
            });
            this.handleList();
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    handleList() {
      //话题列表
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/friendsTopic/list",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quanId,
          },
        }).then((res) => {
          // console.log(res, '话题')
          if (res.data.code == 200) {
            this.normalTopics = res.data.data.normalTopics.map((v) => {
              v.label = v.topic;
              return v;
            });
            this.screenTopics = res.data.data.screenTopics;
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    onDragSortChange(e) {
      //我的话题
      let arrList = [...e];

      function compare(property) {
        return function (a, b) {
          var value1 = a[property];
          var value2 = b[property];
          return value1 - value2;
        };
      }
      let changArr = [];
      arrList.sort(compare("SortNumber")).forEach((v) => {
        changArr.push({
          id: v.id,
        });
      });
      let token = uni.getStorageSync("token");
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/friendsTopic/reorderFriendsTopic",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.quanId,
            list: changArr,
          },
        }).then((res) => {
          // console.log(res, '排序')
          if (res.data.code == 200) {
            // this.findList = res.data.data
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  position: relative;
  width: 750rpx;
  height: 1230rpx;
  .wu_Huo {
    margin-top: 200rpx;
    padding-bottom: 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    image {
      width: 360rpx;
      height: 260rpx;
    }
    text {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(136, 136, 136, 1);
      line-height: 37px;
    }
  }
  .top {
    display: flex;
    height: 70rpx;
    padding: 20rpx 32rpx;
    border-top: 2rpx solid #eee;
    align-items: center;
    .left {
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .center {
      width: 490rpx;
      height: 70rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 17rpx 3rpx rgba(0, 0, 0, 0.06);
      border-radius: 35rpx;
      padding: 0 25rpx;
      box-sizing: border-box;
      margin: 0 20rpx;
      input {
        width: 100%;
        height: 100%;
        font-size: 26rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(70, 70, 70, 1);
      }
    }

    .right {
      width: 51rpx;
      height: 51rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .zhuyi {
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(33, 103, 235, 1);
    margin-left: 32rpx;
    margin-top: 20rpx;
    padding-bottom: 15rpx;
  }
  .list1 {
    padding: 0 32rpx;
    display: flex;
    flex-wrap: wrap;

    .item {
      margin-top: 40rpx;
      margin-right: 40rpx;
      padding: 0 23rpx;
      height: 62rpx;
      display: flex;
      align-items: center;
      border: 2rpx solid rgba(135, 135, 135, 1);
      border-radius: 31rpx;

      .left {
        height: 27rpx;
        width: 35rpx;
        display: flex;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
          // vertical-align: center;
        }
      }

      .center {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(135, 135, 135, 1);
        margin-left: 15rpx;

        text {
          display: inline-block;
          height: 18rpx;
          width: 2rpx;
          background-color: #eee;
          margin: 0 15rpx;
        }
      }

      .right {
        width: 18rpx;
        height: 18rpx;
        display: flex;
        align-items: center;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .bottom_pin {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 388rpx;
    border-top: 2rpx solid #eee;
    padding: 20rpx 32rpx;
    width: 100%;
    box-sizing: border-box;
    .title {
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }

    .list {
      display: flex;
      flex-wrap: wrap;

      .item {
        display: flex;
        align-items: center;
        background: rgba(244, 244, 244, 1);
        border-radius: 31rpx;
        padding: 0 25rpx;
        height: 62rpx;
        margin-top: 25rpx;
        margin-right: 25rpx;

        .left {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: rgba(135, 135, 135, 1);

          .xian {
            display: inline-block;
            width: 2rpx;
            height: 18rpx;
            background-color: #ccc;
            margin: 0 15rpx;
          }
        }

        .right {
          width: 23rpx;
          height: 23rpx;
          // margin-top: -32rpx;
          display: flex;
          align-items: center;

          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
